<script setup lang="ts">
import { ref } from 'vue'
import ChildComp from './components/ChildComp.vue'

// 父组件定义要传递的属性
const money = ref(100)
const car = ref('宝马')
const house = ref('老破小')
// 回调方法监听
const changeMoney = (val: number) => {
  money.value += val
}
const changeCar = (val: string) => {
  car.value = val
}
const changeHouse = (val: string) => {
  house.value = val
}
</script>

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 显示子组件传递过来的数据 -->
    <div>金钱：{{ money }}</div>
    <!-- 注册自定义事件 -->
    <ChildComp
      :childMoney="money"
      :car="car"
      :house="house"
      @changeMoney="changeMoney"
      @changeHouse="changeHouse"
      @changeCar="changeCar"
    />
  </div>
</template>

<style scoped></style>
